/**
* 功能描述: 基础垂直时间线demo
* @author 崔孝楠
* @date 2022/9/22 9:14
* @version 1.0
*/
<template>
  <!-- 居左垂直时间线 -->
  <ul class="yw-vertical-timeline">
    <li class="yw-vertical-timeline-item">
      <div class="yw-vertical-timeline-item-tail"></div>
      <div class="yw-vertical-timeline-item-head"></div>
      <div class="yw-vertical-timeline-item-content">Create a services site 2015-09-01</div>
    </li>
    <li class="yw-vertical-timeline-item">
      <div class="yw-vertical-timeline-item-tail"></div>
      <div class="yw-vertical-timeline-item-head"></div>
      <div class="yw-vertical-timeline-item-content">Solve initial network problems 2015-09-01</div>
    </li>
    <li class="yw-vertical-timeline-item">
      <div class="yw-vertical-timeline-item-tail"></div>
      <div class="yw-vertical-timeline-item-head"></div>
      <div class="yw-vertical-timeline-item-content">Technical testing 2015-09-01</div>
    </li>
    <li class="yw-vertical-timeline-item yw-vertical-timeline-item-last">
      <div class="yw-vertical-timeline-item-tail"></div>
      <div class="yw-vertical-timeline-item-head"></div>
      <div class="yw-vertical-timeline-item-content">Network problems being solved 2015-09-01</div>
    </li>
  </ul>
  <!-- 交替垂直时间线 -->
  <ul class="yw-vertical-timeline yw-vertical-timeline-alternate">
    <li class="yw-vertical-timeline-item yw-vertical-timeline-item-left">
      <div class="yw-vertical-timeline-item-tail"></div>
      <div class="yw-vertical-timeline-item-head"></div>
      <div class="yw-vertical-timeline-item-content">Create a services site 2015-09-01</div>
    </li>
    <li class="yw-vertical-timeline-item yw-vertical-timeline-item-right">
      <div class="yw-vertical-timeline-item-tail"></div>
      <div class="yw-vertical-timeline-item-head"></div>
      <div class="yw-vertical-timeline-item-content">Solve initial network problems 2015-09-01</div>
    </li>
    <li class="yw-vertical-timeline-item yw-vertical-timeline-item-left">
      <div class="yw-vertical-timeline-item-tail"></div>
      <div class="yw-vertical-timeline-item-head"></div>
      <div class="yw-vertical-timeline-item-content">Technical testing 2015-09-01</div>
    </li>
    <li class="yw-vertical-timeline-item yw-vertical-timeline-item-right yw-vertical-timeline-item-last">
      <div class="yw-vertical-timeline-item-tail"></div>
      <div class="yw-vertical-timeline-item-head"></div>
      <div class="yw-vertical-timeline-item-content">Network problems being solved 2015-09-01</div>
    </li>
  </ul>
  <!-- 居右垂直时间线 -->
  <ul class="yw-vertical-timeline yw-vertical-timeline-right">
    <li class="yw-vertical-timeline-item">
      <div class="yw-vertical-timeline-item-tail"></div>
      <div class="yw-vertical-timeline-item-head"></div>
      <div class="yw-vertical-timeline-item-content">Create a services site 2015-09-01</div>
    </li>
    <li class="yw-vertical-timeline-item">
      <div class="yw-vertical-timeline-item-tail"></div>
      <div class="yw-vertical-timeline-item-head"></div>
      <div class="yw-vertical-timeline-item-content">Solve initial network problems 2015-09-01</div>
    </li>
    <li class="yw-vertical-timeline-item">
      <div class="yw-vertical-timeline-item-tail"></div>
      <div class="yw-vertical-timeline-item-head"></div>
      <div class="yw-vertical-timeline-item-content">Technical testing 2015-09-01</div>
    </li>
    <li class="yw-vertical-timeline-item yw-vertical-timeline-item-last">
      <div class="yw-vertical-timeline-item-tail"></div>
      <div class="yw-vertical-timeline-item-head"></div>
      <div class="yw-vertical-timeline-item-content">Network problems being solved 2015-09-01</div>
    </li>
  </ul>
</template>

<script>
export default {
  name: "index"
}
</script>

<style scoped>

</style>
